const path = require('path'); //  path 必填
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入生成html的插件

module.exports = {
  entry: './src/index.js', // 导入路径
  output: {
    clean: true, // 删除
    path: path.resolve(__dirname, 'dist'), // 导出路径
    filename: 'dadada.js', // 导出文件名称
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  mode: 'development', // 配置对象  development开发模式    production生产模式
  devServer: {
    port: 8080, // 端口配置
  },
  module: {
    rules: [
      // css
      {
        test: /\.css$/i, //正则css结尾的文件
        use: ['style-loader', 'css-loader'], // 接口 css-loader识别css并打包  style-loader把打包后的css插入dom中
      },
      // less
      // {
      //   test: /\.less$/i,
      //   use: [
      //     // compiles Less to CSS
      //     'style-loader',
      //     'css-loader',
      //     'less-loader',
      //   ],
      // },  // 包错了 
      // 图片的
      //   {
      //     test: /\.(png|jpg|gif|jpeg)$/i,
      //     type: 'asset'
      // }
      // 文字的
      // {
      //   test: /\.(eot|svg|ttf|woff|woff2)$/i,
      //   type: 'asset/resource',
      //   generator: {
      //     filename: 'font/[name].[hash:6][ext]',
      //   },
      // },
      // 高级转低级的
      // {
      //   test: /\.js$/i,
      //   exclude: /(node_modules|bower_components)/,
      //   use: {
      //     loader: 'babel-loader',
      //     options: {
      //       presets: ['@babel/preset-env'],
      //     },
      //   },
      // },
    ],
  },
};
